import {Button, List, Modal, Select, Table, Toast} from '@douyinfe/semi-ui';
import {IconDelete, IconSemiLogo, IconUndo} from '@douyinfe/semi-icons';
import React, {useEffect, useMemo, useState} from "react";
import {CanDelete, DeleteCollege, getCollege, getcollegejson} from "../../../../api/api.js";
import College_EForm from "./compent/College_EForm.jsx";
import College_AForm from "./compent/College_AForm.jsx";
import {School} from "@icon-park/react";

function CollegeTable() {
    const [data,setdata] = useState()
    const [trdata,settrdata] = useState(null)
    const [fdata,setfdata] = useState(null)
    const [beifen,setbkdata] = useState(null)
    const [row,setrow] = useState(null)
    const [visible, setVisible] = useState(false);
    const [visible2, setVisible2] = useState(false);
    const [selectedValues, setSelectedValues] = useState("请选择学院");
    useEffect(()=>{
        getlist();
        getcolljson();
    },[])
    async function getlist(){
        const res = await getCollege()
        res.data.data.forEach(v=>{
            v.key = v.cid
        })
        setdata(res.data.data)
        setbkdata(res.data.data)
    }
    async function isdelete(){
        let form = new FormData()
        form.append("id",row)
        const res = await CanDelete(form)
        console.log(res.data.data)
        if (res.data.data===false){
            setVisible2(true)
        }else {
            setVisible(true)
        }
    }
    async function getcolljson() {
        const res = await getcollegejson();
        settrdata(res.data.data[0])
        setfdata(res.data.data[1])
    }
    async function deleteColl() {
        let form = new FormData()
        form.append("id",row)
        const res = await DeleteCollege(form);
        if (res.data.code==200){
            Toast.success('学院删除成功')
        }else {
            Toast.success('学院删除失败')
        }
    }
    const Search = value => {
        setSelectedValues(value);
        const res = beifen.filter(v => {
            return v.cname === value;
        });
        setdata(res)
    }
    const handleOk = () => {
        setVisible(false);
        deleteColl()
    };
    const handleCancel = () => {
        setVisible(false);
    };
    const handleOk2 = () => {

        setVisible2(false);
    };
    const handleCancel2 = () => {
        setVisible2(false);
    };
    const handleAfterClose2 = () => {
    };


    const columns = [
        {
            title: '学院编号',
            dataIndex: 'cid',
        },
        {
            title: '学院名称',
            dataIndex: 'cname',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record, index) => {
                return (
                    <div>
                       <College_EForm mess={record}></College_EForm>
                    </div>
                );
            },

        },
    ];
    const rowSelection = useMemo(
        () => ({
            onSelect: (record, selected) => {
                if (selected) {
                    setrow(record.cid);
                } else {
                    setrow(null);
                }
            },
        }),
        []
    );
    function getbk() {
        setdata(beifen)
        setSelectedValues("请选择学院");
    }
    const btnStyle = {
        width: 240,
        margin: '4px 50px',
    };
    const footer = (
        <div style={{ textAlign: 'center' }}>
            <Button type="primary" theme="solid" onClick={handleOk} style={btnStyle}>
                确认
            </Button>
            <Button type="primary" theme="borderless" onClick={handleCancel} style={btnStyle}>
                取消
            </Button>
        </div>
    );

    const data3 = [
        {
            icon: <IconSemiLogo style={{ fontSize: 48 }} />,
            title: '删除学院后可能发生无法挽回的后果',
            content: '删除学院后无法撤回，请慎重删除',
        }
    ];

    const pagination = useMemo(
        () => ({
            pageSize: 8,
        }),
        []
    );

    return(
        <>
            <h2><School theme="outline" size="24" fill="#4a90e2"/> 学院管理</h2>
            <Select value={selectedValues} onChange={Search} placeholder="请选择学院" style={{ width: 180,marginRight:10 }} optionList={trdata}></Select>
            <Button onClick={()=>{getbk()}} icon={<IconUndo />} theme="solid" style={{ marginRight: 10,backgroundColor:'rgba(var(--semi-red-4), 1)' }}>重置</Button>
            <College_AForm></College_AForm>
            <Button onClick={()=>{isdelete()}} icon={<IconDelete />} theme='solid' type='warning' style={{ marginLeft: '10px',backgroundColor:'rgba(var(--semi-teal-3), 1)' }}>删除学院</Button>
            <Table style={{marginTop:'15px'}} bordered={true} columns={columns} dataSource={data} rowSelection={rowSelection} pagination={pagination} />
            <Modal
                header={null}
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={footer}
            >
                <h3 style={{ textAlign: 'center', fontSize: 24, margin: 40 }}>删除警告</h3>
                <List
                    dataSource={data3}
                    split={false}
                    renderItem={item => (
                        <List.Item
                            header={item.icon}
                            main={
                                <div>
                                    <h6 style={{ margin: 0, fontSize: 16 }}>{item.title}</h6>
                                    <p style={{ marginTop: 4, color: 'var(--semi-color-text-1)' }}>
                                        {item.content}
                                    </p>
                                </div>
                            }
                        />
                    )}
                />
            </Modal>
            <Modal
                title="警告"
                visible={visible2}
                onOk={handleOk2}
                afterClose={handleAfterClose2} //>=1.16.0
                onCancel={handleCancel2}
                closeOnEsc={true}
            >
                <h4>请先删除和学院有关的系部、专业、班级！</h4>
            </Modal>
        </>

    ) ;
}
export default CollegeTable